<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>一只猫</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="font/iconfont.css"/><!--引入阿里巴巴图库 -->
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.bundle.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body  class="container col-md-12"> <!--布局容器 -->
	<nav class="fixed-top navbar navbar-expand-sm navbar-light bg-dark">	<!--导航栏 样式  响应式布局  导航固定在顶部 -->
		<a class="navbar-brand col-md-2" href="#">
		<img src="img/猫咪.png" width="75" height="70" alt="一只猫"/> <!--logo 网站名为一只猫-->
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav"><!--触发折叠下拉菜单 -->
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="myNav">
			<ul class="navbar-nav  nav list-inline col-md-7">
				<li class="nav-item active list-inline-item"><!--激活状态 -->
					<a class="nav-link  text-warning" href="#">首页</a>
				</li><!--黄色字体  导航链接-->
				<li class="nav-item list-inline-item dropdown">
					<a class="nav-link dropdown-toggle text-warning" href="#" data-toggle="dropdown">关于一只猫</a>
					<div class="dropdown-menu"> <!--点击出现下拉菜单 -->
						<a class="dropdown-item" href="#">历史回顾</a>
						<a class="dropdown-item" href="#">社会责任</a>
						<a class="dropdown-item" href="#">企业新闻</a>
					</div>
				</li>
				<li class="nav-item list-inline-item dropdown">
					<a class="nav-link dropdown-toggle  text-warning" href="#" data-toggle="dropdown">合作</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#">共赢</a>
						<a class="dropdown-item" href="#">共事</a>
						<a class="dropdown-item" href="#">反馈</a>
					</div>
				</li>
				<li class="nav-item list-inline-item dropdown">
					<a class="nav-link dropdown-toggle  text-warning" href="#" data-toggle="dropdown">介绍</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="breed.html">品种</a><!--点击跳转网页 -->
						<a class="dropdown-item" href="#">洗护</a>
						<a class="dropdown-item" href="#">医疗</a>
						<a class="dropdown-item" href="#">售后</a>
					</div>
				</li>
				<li class="nav-item list-inline-item dropdown">
					<a class="nav-link dropdown-toggle  text-warning" href="#" data-toggle="dropdown">我的</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="sign.html">注册</a><!--点击跳转网页 -->
						<a class="dropdown-item" href="login.html">登录</a>
						<a class="dropdown-item" href="member.html">加入会员</a>
					</div>
				</li>
			</ul>
			<form class="col-md-5">
			<div class="input-group"> <!--输入框添加按钮 -->
			<input class="form-control" type="text" placeholder="搜索周边门店">
			<div class="input-group-append"> <!-- 按钮作为输入框的后缀-->
				<button class="btn btn-warning" type="submit">
					<span class="iconfont">&#xe614;搜索</span><!--阿里巴巴图标 -->
				</button>
			</div>
			</div>
			</form>
		</div>
	</nav>
<div id="myCarousel" class="carousel side carousel-fade " data-ride="carousel"><!--轮播图 淡入淡出 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-side-to="0" class="active"></li><!--定义播放顺序的下标  默认显示 -->
		<li data-target="#myCarousel" data-side-to="1"></li>
		<li data-target="#myCarousel" data-side-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item active" data-interval="500"><!--间隔0.5秒 -->
			<img src="img/1.jpg" class="d-block w-100 h" alt=""><!--第一个图 -->
			<div class="carousel-caption"></div>
		</div>
		<div class="carousel-item" data-interval="500">
			<img src="img/2.jpg" class="d-block w-100 h" alt="">
			<div class="carousel-caption"></div>
		</div>
		<div class="carousel-item" data-interval="500">
			<img src="img/3.jpg" class="d-block w-100 h" alt="">
			<div class="carousel-caption"></div>
		</div>
	</div>
	<a class="carousel-control-prev" href="#myCarousel" role="button" data-side="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span><!-- 上一个-->
	</a>
	<a class="carousel-control-next" href="#myCarousel" role="button" data-side="next">
		<span class="carousel-control-next-icon iconfont" aria-hidden="true"></span>
		<span class="sr-only ">Next</span><!--下一个 -->
	</a>
</div>
   <div class="d-flex justify-content-center row m"><!--弹性布局  子元素位于容器的中心-->
   	<div class="col-sm-5"> <!-- 网格布局-->
   		<p><img src="img/实时资讯.png" width="20" height="20" alt="时事热点">时事热点</p>
   		<ul class="list-unstyled"><!--移除默认的list-style样式  左侧填充为0 -->
   			<li class="lh"><a href="#">最名贵的猫
   			<span class="badge badge-primary badge-danger">hot</span><!--链接徽章 -->
   			</a></li>
   			<li class="lh"><a href="#">"猪猫"是怎样形成的
   			<span class="badge badge-primary badge-danger">hot</span>
   			</a></li>
   			<li class="lh"><a href="#">猫咪看手相
   			<span class="badge badge-primary badge-danger">hot</span>	
   			</a></li>
   			<li class="lh"><a href="#">十大最受欢迎的宠物猫
   			<span class="badge badge-primary badge-danger">hot</span>
   			</a></li>
   			<li class="lh"><a href="#">养猫的诡异禁忌
   			<span class="badge badge-primary badge-danger">hot</span>
   			</a></li>
   			<li class="lh"><a href="#">猫咪喂养：宠物猫不吃猫粮何意
   			<span class="badge badge-primary badge-danger">hot</span>	
   			</a></li>
   			<li class="lh"><a href="#">猫咪道歉的六大行为</a></li>
   			<li class="lh"><a href="#">你家主子几岁了？</a></li>
   			<li class="lh"><a href="#">你的那些撸猫行为让猫咪很舒服</a></li>
   			<li class="lh"><a href="#">顶天立地猫爬架通天柱猫窝猫树猫架子一体大型猫咪爬架
   			<span class="badge badge-primary badge-primary">广告</span>
   			</a></li>
   			<li class="lh"><a href="#">[品牌]顽皮猫零食欧一吸猫条流质秒鲜湿粮包成幼猫猫条
   			<span class="badge badge-primary badge-primary">广告</span>
   			</a></li>
   			<li class="lh"><a href="#">布偶猫纯种猫猫咪活物海双布偶猫幼崽
   			<span class="badge badge-primary badge-primary">广告</span>
   			</a></li>
   		</ul>
   		<div style="margin-top:40px;">
   			<div class="card w-75"><!-- 卡片 宽75%-->
	   			<div class="card-body">
	   				你想在此平台推广您的商品吗？<br/>点击此链接<a class="text-primary">1333333333</a><!--文本蓝色 -->
	   			</div>
   			</div>
   	</div>
   	</div>
        <div class="col-sm-5"><!-- 网格布局-->
        	<p><img src="img/猫.png" width="32px" height="30px" style="margin-left:-5px;">品种</p>
        	<div class="media mt-3"><!--媒体-->
        		<img class="align-self-center mr-3" src="img/英国短毛猫.jpg" alt="英国短毛猫" width="80"><!--居中对齐 -->
        		<div class="media-body">
        			<h5>英国短毛猫</h5>
        			<p>英国短毛猫是一种身体紧凑、匀称并且强壮有力的猫，身体很厚实，胸部饱满宽阔，腿部粗壮，长度为短到中等，爪子浑圆，尾巴的根部粗壮, 尾尖钝圆。</p>
        		</div>
        	</div>
        	<hr/>
        	<div class="media mt-3">
        		<img class="align-self-center mr-3" src="img/加拿大无毛猫.jpg" alt="加拿大无毛猫" width="80">
        		<div class="media-body">
        			<h5>加拿大无毛猫</h5>
        			<p>加拿大无毛猫性情温顺，独立性强，无攻击性，能与其它猫狗相处。</p>
        		</div>
        	</div>
        	<hr/>
        	<div class="media mt-3">
        		<img class="align-self-center mr-3" src="img/布偶猫.jpg" alt="布偶猫" width="80">
        		<div class="media-body">
        			<h5>布偶猫</h5>
        			<p>布偶猫是猫中较大、较重的一种。它的头呈V形，眼大而圆，被毛丰厚，四肢粗大，尾长，身体柔软，多为三色或双色猫</p>
        		</div>
        	</div>
        	<hr/>
        	<div class="media mt-3">
        		<img class="align-self-center mr-3" src="img/美国缅甸猫.jpg" alt="美国缅甸猫" width="80">
        		<div class="media-body">
        			<h5>缅甸猫</h5>
        			<p>缅甸猫（Burmese），以圆著称，无论头部正面还是侧面，从头到尾都是圆头圆脑，浑圆丰腴.</p>
        		</div>
        	</div>
        </div>
   </div>
   <div class="list-inline nav justify-content-around row  text-center bg-dark"><!--子元素都留有空白  黑色背景-->
   			<ul class="list-unstyled list-inline-item col-sm-2 col-3"><!--网格布局  水平排列  删除样式-->
   				<li ><a href="#" class="text-warning">一只猫</a></li><!--黄色字体 -->
   				<li ><a href="#" class="text-warning">猫咪交易</a></li>
   				<li><a href="#"  class="text-warning">猫咪用品</a></li>
   				<li ><a href="#" class="text-warning">营养猫粮</a></li>
   			</ul>
   			<ul class="list-unstyled list-inline-item col-sm-2 col-3">
   				<li><a href="#" class="text-warning">关于我们</a></li>
   				<li><a href="#" class="text-warning">企业合作</a></li>
   				<li><a href="#" class="text-warning">企业文化</a></li>
   				<li><a href="#" class="text-warning">联系客服</a></li>
   			</ul>
   			<ul class="list-unstyled list-inline-item col-sm-2 col-3">
   				<li><a href="#" class="text-warning">加入会员</a></li>
   				<li><a href="#" class="text-warning">低至五折</a></li>
   				<li><a href="#" class="text-warning">多重好礼</a></li>
   				<li><a href="#" class="text-warning">免费撸猫</a></li>
   			</ul>  	
   	</div>
</body>
</html>